<!-- 房屋管理 -->
<template>
	<div>
	  <div class="header">
		<div class="title">
		  
			<div style="width: 28%;float: left;margin-top: 15px;margin-left: 10px;margin-bottom: 15px;">
				<a-space style="margin-left: 10px">
            <span>开始时间：</span>
              <a-date-picker v-model:value="startDate" :format="dateFormat" />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>结束时间：</span>
            <a-date-picker v-model:value="endDate" :format="dateFormat" />
          </a-space>
		 </div>
		 <div style="float: left; width: 8%; margin-top: 20px; margin-left: 15px;">
				<a-space class="search-btn">
					<a-checkbox v-model:checked="checked" @change="getChecked()">66个重点村</a-checkbox>
				</a-space>
			</div>
          <div style="float: left;width: 5%;margin-top: 15px;margin-left: 15px;">
            <a-space class="search-btn">
              <a-button type="primary" style="line-height: 25px;" @click="searchBtn">查询</a-button>
            </a-space>
          </div>
       
			  <div style="float: left; width: 27%">
          <a-space style="float: left; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space> 
        </div>
		</div>
		<a-table style="margin-top: 0px;"
		  :dataSource="tableData"
		  :columns="displayColumns"
		  :pagination="false"
		  :scroll="{ x: 1500, y: tableHeight }"
		  bordered
		  :loading="loading"
		>
		</a-table>
		<div class="pagination" style="float: right">
		  <a-pagination
			show-size-changer
			v-model:current="pageIndex"
			v-model:pageSize="pageSize"
			:total="total"
			@show-size-change="onShowSizeChange"
		  />
		</div>
	  </div>
	</div>
  </template>
  
  <script lang="ts" setup>
   import moment from 'moment';
  import dayjs from 'dayjs';
import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { getsysstdlist } from '/@/api/demo/hoursebase'; //统计工作进展
	import { useUserStore } from '/@/store/modules/user';
	import { iTableData, iTableColumns } from './types/table';
	import { iParams } from './types/params';
	import { useGlobSetting } from '/@/hooks/setting';
	import { downloadByUrl } from '/@/utils/file/download';
  //   import Detail from './component/detailDrawer.vue';
	const userStore = useUserStore();
	const globSetting = useGlobSetting();
	let userInfo = ref<any>(null);
	let detailTableHeight = ref<number>(0); // 表格高度
	let tableHeight = ref<number>(0); // 表格高度
	let pageIndex = ref(1);
	let pageSize = ref(15);
	const value18 = ref<string[]>([]);
	let txtKeyWord = ref<string>('');
	let fwzt = ref<string>('');
  let total = ref(0);
  const dateFormat = 'YYYY-MM-DD';
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const checked = ref(false);
	let data = reactive<{
	  tableData: iTableData[];
	  tableColumns: iTableColumns[];
	  wscolsList: { wch: number }[];
	  id: number | any;
	  loading: Boolean;
	  keyWorld: String;
	  currentqx: string; // 当前行政区名称
	  currentTitle: string;
	  cityToken: string | any;
	  endTime: string;
      startTime: string;
	}>({
	  // 表格数据
	  tableData: [],
	  tableColumns: [
		{
		  title: '序号',
		  dataIndex: 'index',
		  key: 'index',
		  align: 'center',
		  width: 80,
		},
		{
		  title: '区名称',
		  dataIndex: 'xzq',
		  key: 'xzq',
		  align: 'center',
		  width: 120,
		  scopedSlots: { customRender: 'town' },
          ellipsis: true, //需ant版本为1.5及以上
		},
		{
		  title: '房屋栋数',
		  dataIndex: 'zcount',
		  key: 'zcount',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '人员疏散通道建设达标栋数',
		  dataIndex: 'ssltdbfjsl',
		  key: 'ssltdbfjsl',
		  align: 'center',
		  width: 200,
		},
		{
		  title: '人员疏散通道建设不达标栋数',
		  dataIndex: 'wwccount',
		  key: 'wwccount',
		  align: 'center',
		  width: 200,
		},
		{
		  title: '达标率',
		  dataIndex: 'dbl_pencent',
		  key: 'dbl_pencent',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '一层达标率',
		  dataIndex: 'one_pencent',
		  key: 'one_pencent',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '二层达标率',
		  dataIndex: 'two_pencent',
		  key: 'two_pencent',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '三层及以上达标率',
		  dataIndex: 'three_pencent',
		  key: 'three_pencent',
		  align: 'center',
		  width: 170,
		},
	  ],
	  id: null,
	  loading: true,
	  keyWorld: '',
	  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
	  currentqx: '', // 当前行政区名称
	  currentTitle: '', // 当前详情标题
	  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
	  endTime:'',
      startTime:'',
	});
	// 表格的 ref Dom名称
	let { tableData, loading, currentqx, currentTitle } = toRefs(data);
	async function getData() {
	  const { role } = userInfo.value;
	  if (startDate.value == null) {
      let currentDate = moment().format('YYYY-MM-DD');
      const start: any = dayjs('2024-01-01');
      const end: any = dayjs(currentDate);
      startDate.value = start;
      endDate.value = end;
      getTime();
    }
	  let groupname = '';
	  if (role === 'City') {
		groupname = 'qxmc';
	  } else if (role === 'Area') {
		groupname = 'jzmc';
	  } else if (role === 'Street') {
		groupname = 'czmc';
	  }
	  let params: iParams = {
		groupname: groupname,
		pageIndex: pageIndex.value,
		pageSize: pageSize.value,
		txtKeyWord:txtKeyWord.value,
		startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
        endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
		cked:checked.value
	  };
	  if(value18.value != undefined)
	  {
		params.xzqdm = value18.value[0];
		params.towndm = value18.value[1];
		params.villagedm = value18.value[2];
	  }
	  loading.value = true;
	  let res: any = await getsysstdlist(params);
	  console.log('@res--工作进入汇总表', res.items);
  
	  if (res || res.items.length > 0) {
		loading.value = false;


		
		data.tableData = [...res.items];
		total.value=res.total;
	  }
	}
	function getTime() {
	    data.startTime = moment(startDate.value.$d).format('YYYY-MM-DD');
    data.endTime = moment(endDate.value.$d).format('YYYY-MM-DD');
    console.log('@查询参数 -- 开始时间', data.startTime);
    console.log('@查询参数 -- 结束时间', data.endTime);
  }
	function getUserInfo() {
	  const userStore = useUserStore();
	  userInfo.value = userStore?.getUserInfo;
	}
  
	function searchBtn() {
	  data.loading = true;
	  getData();
	}
	function getChecked()
  {
    getData();
  }
  function onChange(value) {
		value18.value=value;
  };
	const displayColumns = computed(() => {
	  const { role } = userInfo.value;
	  let arr: any[] = [];
	  if (role === 'City') {
		// qx
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
		return arr;
	  } else if (role === 'Area') {
		// jz
		arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
		return arr;
	  } else if (role === 'Street') {
		// cun
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
		console.log('@Aarr', arr);
		return arr;
	  } else {
		return data.tableColumns;
	  }
	});
	function handleExport() {
	
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
	let val=txtKeyWord.value;
	let strFwzt=fwzt.value;
    downloadByUrl({
      url:
        uriBase +
        '/static/stat/sysstdExportExcel?access_token=' +
        tk +
        '&startTime=' +
        moment(startDate.value.$d).format('YYYY-MM-DD') +
        '&endTime=' +
        moment(endDate.value.$d).format('YYYY-MM-DD'),
      target: '_blank',
    });
  }

	const getTableHeight = () => {
	  setTimeout(() => {
		detailTableHeight.value = window.innerHeight;
		tableHeight.value = window.innerHeight;
	  });
	};
	watch(pageSize, () => {
	  console.log('pageSize', pageSize.value);
	  getData();
	});
	watch(pageIndex, () => {
	  console.log('current', pageIndex.value);
	  getData();
	});
	onBeforeMount(() => {
	  getUserInfo();
	});
	onMounted(() => {
	  console.log('******工作进展统计初始化******');
	  getData();
	  getTableHeight();
	 // getTableData();
	});
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
	#map {
	  height: calc(100vh - 140px);
	}
  
	.x-houseMng-search {
	  z-index: 100;
	  margin: 6px;
	  position: absolute;
	}
  
	.root-house-mng-main {
	  margin: 6px;
	}
  
	.x-village-tabs {
	  //z-index: 100;
	  //position: absolute;
	  width: 60vw;
	  margin-top: 6px;
	  margin-left: 40px;
	  //background-color: rgba(34, 34, 34, 0.6);
	  :deep(.ant-form) {
		margin-top: 6px;
	  }
  
	  // :deep(.ant-form-item-label) > label {
	  //   color: white;
	  // }
	}
  </style>
  